<!--
热点图/闪烁光点
    - 背景图：background-size
    - 子绝父相、子绝父绝
    - 多个波纹
        不要用边框、背景色，用阴影最合适，因为虚幻效果
        利用定位，多个波纹重叠在同一个位置
        多个波纹延时不同，可以实现更酷炫的效果
    - 属性选择器
    - 权重问题
    - 透明度：opacity，取值[0,1]
    - 动画使用宽高数值、不要用宽高缩放
-->
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    background-color: #2f322e;
  }

  .map {
    /* 父相 */
    position: relative;
    width: 800px;
    height: 616px;
    margin: 50px auto;
    background: url("./img/版图.png") no-repeat;
    background-size: 100%;
    border: 5px dotted rgb(78, 73, 180);
  }

  .city {
    /* 子绝 */
    position: absolute;
  }
  .bj {
    top: 220px;
    right: 230px;
    /* width: 10px;
    height: 10px;
    background-color: red; */
  }
  .tb {
    top: 472px;
    right: 123px;
  }
  .gz {
    top: 509px;
    right: 223px;
  }

  /* 一个点 */
  .dotted {
    width: 8px;
    height: 8px;
    background-color: rgba(0, 145, 255, 0.7);
    border-radius: 50%;
  }

  /* 多个波纹，重叠在同一个地方 */
  .city div[class^="pulse"] {
    /* 子绝 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    /* 水平、垂直阴影为0，才能在居中显示 */
    box-shadow: 0 0 12px #009dfd;
    border-radius: 50%;
    /* 调用动画，匀速更好 */
    animation: myPulse 1.2s linear infinite;
  }

  /* 不同延时：波纹更酷炫 */
  .city div.pulse2 {
    animation-delay: 0.4s;
  }
  .city div.pulse3 {
    animation-delay: 0.8s;
  }

  /* 定义动画 */
  @keyframes myPulse {
    from {
      /* 都是默认的，可以省略 */
      width: 8px;
      height: 8px;
      opacity: 1;
    }
    60% {
      /* 缩放宽高导致阴影跟着缩放，达不到效果（但用来做心脏跳动非常不错。。），用宽高跟随动画变化即可 */
      /* transform: scale(3); */
      opacity: 1;
    }
    to {
      width: 50px;
      height: 50px;
      opacity: 0;
    }
  }
</style>

<div class="map">
  <div class="city bj">
    <!-- 一个点，三个波纹 -->
    <div class="dotted"></div>
    <div class="pulse1"></div>
    <div class="pulse2"></div>
    <div class="pulse3"></div>
  </div>
  <div class="city tb">
    <div class="dotted"></div>
    <div class="pulse1"></div>
    <div class="pulse2"></div>
    <div class="pulse3"></div>
  </div>
  <div class="city gz">
    <div class="dotted"></div>
    <div class="pulse1"></div>
    <div class="pulse2"></div>
    <div class="pulse3"></div>
  </div>
</div>
